;(function($){
    "use strict"

    $.fn.banner=function(data,ops={}){
        // 解构赋值式确定参数
        let{btns=true,
            list=true,
            autoPlay=true,
            delayTime=2000,
            moveTime=200,
            index=0,
            direct="left",
            listStyle=""}=ops;
            const that = this;
            let prev;

            console.log(data)        
            console.log(listStyle,btns, list, autoPlay, delayTime, moveTime, index, direct)   
           
            // 创建大盒子,并并插入this，这里this为函数的执行者及 '.banner1'。
            const imgbox=$("<div class='imgbox'></div>").appendTo(this);
            // 把图片渲染到页面
            // 遍历数据渲染页面
            // 把渲染好的内容插入到大盒子里
            let str="";
            for(let i =0;i<data.length;i++){
                str += `<a href="${data[i].link}">
                    <p>${data[i].hh}</p>
                <img src="${data[i].src}" alt="${data[i].alt}" title="${data[i].title}">
            </a>`;
            };
         imgbox.html(str);

         imgbox.children("a").eq(index).css({left:0});

        //  添加左右按钮及其功能
        if(btns){
            $("<div class='btns'></btn>").appendTo(this).append($("<input class='left' value='<<<' type='button'>"))
            .append($("<input class='right' value='>>>' type='button'>")).children(".left").hide().click(leftClick).end()
            .children(".right").hide().click(RightClick);

          this.hover(function(){
            that.find(".left").show()
            that.find(".right").show()
          },function(){
            that.find(".left").hide()
            that.find(".right").hide()
          })

       
         


        }; 
        // 左按钮功能
        function leftClick(){
            let aaa=1;
           let bbb=-1;
           if(index===0){
               index=data.length-1;
               prev=0
           }else{ index--;
          prev=index+1
       };
       btnMove(aaa,bbb);
   }
         
       // 右按钮功能
       function RightClick(){
           let aaa=-1;
           let bbb=1;
           if(index===data.length-1){
               index = 0;
               prev =data.length-1;
           }else{
               index++;
               prev=index-1;

           }
            btnMove(aaa,bbb); 
            
       }

           //  按钮的移动函数
         function btnMove(aaa,bbb){
            //  console.log(aaa);
           imgbox.children("a").eq(prev).css({left:0}).stop().animate({left:aaa*imgbox.children("a").eq(prev).width()},
          moveTime ).end().eq(index).css({
              left:bbb*imgbox.children("a").eq(prev).width()
          }).stop().animate({left:0},moveTime)
       //    移动完成后修改当前分页器的选中位置
         that.find(".list").children("span").eq(index).addClass(listStyle).siblings().removeClass(listStyle);
       };




        //  添加分页器
        if(list){
            let str="";
            for(let i=0;i<data.length;i++){
                str +=`<span></span>`;
            };
            $("<div class='list'></div>").appendTo(this).html(str).children("span").eq(index).addClass(listStyle).end().mouseover(
                function(){
                    if($(this).index()>index){
                         listMove(index,$(this).index(),-1)
                    }
                    if($(this).index()<index){
                        listMove(index,$(this).index(),1)
                    }
                    index=$(this).index();
                }
            );
            // 分页器移动函数
            function listMove(prev,index,d){
                imgbox.children("a").eq(prev).css({left:0}).stop().animate({
                    left:imgbox.children("a").eq(prev).width() * d
                },moveTime).end().eq(index).css({
                    left:-imgbox.children("a").eq(prev).width() * d
                }).stop().animate({
                    left:0
                },moveTime);
                // 修改分页器选中位置
                 that.find(".list").children("span").eq(index).addClass(listStyle).siblings().removeClass(listStyle);
            }
        };
        
      if(autoPlay){

        let t =setInterval(()=>{
            if(direct === "left"){
                RightClick()
            }else{
                LeftClick()
            } 
        },delayTime);
        this.hover(function(){
            clearInterval(t)
        },function(){
            t = setInterval(() => {
                if(direct === "left"){
                    RightClick()
                }else{
                    LeftClick()
                }
            }, delayTime);
        })
      }



    };





}(jQuery));